<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@	taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<title>后台数据统计</title>
<jsp:include page="../../include/header.jsp"></jsp:include>
<style type="text/css">
table th {
	text-align: center;
}

table td {
	text-align: center;
}
.tab-content .panel{
	width:30%
}
table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}
.dianpu .col-lg-12 {
	display: inline-block;
	width:50%
}
/*此页面为分公司详情表格分开页面（参照原型）       暂时不用     */
</style>
</head>
<body>
<div id="wrapper">

		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">${date }数据详情</h1>
			</div>
		</div>
		<div class="row">
				<div class="col-lg-12">
					<h4>订单详情</h4>
					<div class="table-responsive panel panel-default">
						<table id="dataTable" class="table table-hover table-bordered"
							style="overflow: scroll;">
							<thead>
								<tr>								
									<th width="15%">机构</th>
									<th width="15%">已付款订单</th>
									<th width="15%">未兑换订单</th>
									<th width="15%">已取消订单</th>
									<th width="15%">已退款订单</th>
									<th width="15%">待付款订单</th>
								</tr>
							</thead>
								<c:forEach items="${orderlist }" var="record" varStatus="s">
									<tbody id="orderList">
										<c:if test="${s.index==0 }"><td>常规</td></c:if>
										<c:if test="${s.index==1 }"><td>团购</td></c:if>
										<c:if test="${s.index==2 }"><td>异业</td></c:if>
										<td>${record.ydNum==null?0: record.ydNum}</td>
										<td>${record.wdNum==null?0: record.wdNum }</td>
										<td>${record.yqNum==null?0: record.yqNum}</td>
										<td>${record.ytNum==null?0: record.ytNum}</td>
										<td>${record.dfNum==null?0: record.dfNum}</td>
									</tbody>
								</c:forEach>
						</table>
					</div>
				</div>
				<div class="dianpu">
				<h4 style="margin-left: 14px">分公司详情</h4>
				<div class="col-lg-12">
					<div class="table-responsive panel panel-default">
						<table id="dataTable" class="table table-hover table-bordered"
							style="overflow: scroll;">
							<thead>
								<tr>								
									<th width="40%">分公司名称</th>
									<th width="30%">绑定会员数</th>
									<th width="30%">占比</th>
								</tr>
							</thead>
								<c:forEach items="${storelist }" var="record" varStatus="s">
									<tbody id="storeList">
										<td>${record.title }</td>
										<td>${record.usNum }</td>
										<c:if test="${usNum!=0 && usNum!=null}">
											<td><fmt:formatNumber type="number" value="${record.usNum*100/usNum}" maxFractionDigits="0"/>%</td>
										</c:if>	
										<c:if test="${usNum==null ||usNum==0 }"><td>0</td></c:if>
									</tbody>
								</c:forEach>
						</table>
					</div>
				</div>
					<div class="col-lg-12">
						<div class="table-responsive panel panel-default">
							  <table id="dataTable" class="table table-hover table-bordered"
									style="overflow: scroll;">
									<thead>
										<tr>								
											<th width="40%">分公司名称</th>
											<th width="30%">新会员月线下消费额</th>
											<th width="30%">占比</th>
										</tr>
									</thead>
										<c:forEach items="${storelist }" var="record" varStatus="s">
											<tbody id="storeList">
												<td>${record.title }</td>
												<td>${record.usSum }</td>
												<c:if test="${usSum!=0 && usSum!=null }">
													<td><fmt:formatNumber type="number" value="${record.usSum*100/usSum}" maxFractionDigits="0"/>%</td>
												</c:if>
												<c:if test="${usSum==null ||usSum==0 }"><td>0</td></c:if>
											</tbody>
										</c:forEach>
								</table>
						</div>
					</div>
				</div>
				<div class="col-lg-12">
					<h4>商品详情</h4>
					<ul class="nav nav-tabs" id="myTab" style="width: 30%;">
					    <li class="active"><a href="#userInfo" data-type="0">常规</a></li>
					    <li><a id="serviceRecordTab" href="#serviceRecord" data-type="1">团购</a></li>
					    <li><a href="#courseTime" data-type="2">异业</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="userInfo">
							<h5>总兑换数量:<label id="count0">0</label></h5>
							<div class="table-responsive panel panel-default">
								<table id="dataTable" class="table table-hover table-bordered"
									style="overflow: scroll;">
									<thead>
										<tr>								
											<th style="width: 70%">常规商品名称</th>
											<th style="width: 30%">兑换数量</th>
										</tr>
									</thead>
									<tbody id="goodsList0"> </tbody>
								</table>
							</div>
						</div>
						<div class="tab-pane fade" id="serviceRecord">
						   <div class="col-lg-12">
								<h5>总兑换数量:<label id="count1">0</label></h5>
								<div class="table-responsive panel panel-default">
									<table id="dataTable" class="table table-hover table-bordered"
										style="overflow: scroll;">
										<thead>
											<tr>								
												<th style="width: 70%">团购商品名称</th>
												<th style="width: 30%">兑换数量</th>
											</tr>
										</thead>
										<tbody id="goodsList1"> </tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="tab-pane fade" id="courseTime">
						    <div class="col-lg-12">
								<h5>总兑换数量:<label id="count2">0</label></h5>
								<div class="table-responsive panel panel-default">
									<table id="dataTable" class="table table-hover table-bordered"
										style="overflow: scroll;">
										<thead>
											<tr>								
												<th style="width: 70%">异业商品名称</th>
												<th style="width: 30%">兑换数量</th>
											</tr>
										</thead>
										<tbody id="goodsList2"> </tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-12">
								<ul id="dataPagination" class="pagination-sm pull-right"></ul>
							</div>
						</div>
					</div>
				</div>
		</div>

</div>
<jsp:include page="../../include/javascripts.jsp"></jsp:include>
<!-- 异步加载下一页数据后，用模板渲染 -->
<script type="text/html" id="goodsdataTpl">
{{each list as item}}
	 <tr>
         <td width="50%">{{item.name}}</td>
		 <td width="50%">{{item.usNum}}</td>
	 </tr>
{{/each}}
</script>
<script type="text/javascript">
var dataPaginator,type=0;
$(query);
function query() {
	var params = {
		pageSize : 10,
		month : '${selectMonth}',
		type :type
	};
	if (dataPaginator) {
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination",
			"${BASE_PATH}/bus/data/goodsDetail", params, function(result) {						
				if(result.flag==0){
				//根据模板渲染数据并填充
				$("#goodsList"+type).empty().append(
						template("goodsdataTpl", result.object));
				$('#count'+type).text(result.message)
				}else if(result.flag==1){
					var wrapper=document.getElementById("page-wrapper");
					wrapper.innerHTML="";
					wrapper.style.height="0";
					var act=document.getElementById("noAuthority");
					act.style.display="block";
                   return;					
				}
			});
}
$('#myTab a').click(function (e) {
	e.preventDefault();
	type=$(this).data("type")
	query() 
	$(this).tab('show');
});
	</script>
</body>
</html>